import { Tooltip, useColorModeValue } from '@chakra-ui/react';
import { SegmentedControl, SegmentedControlProps } from '@mantine/core';
import { memo } from 'react';

export type IAISegmentedControlProps = SegmentedControlProps & {
  tooltip?: string;
};

const IAISegmentedControl = (props: IAISegmentedControlProps) => {
  const { tooltip, data, value, onChange } = props;
  const root_bg = useColorModeValue(
    'var(--tourfly-colors-base-900)',
    'var(--tourfly-colors-base-850)'
  );
  const indicator_bg = useColorModeValue(
    'var(--tourfly-colors-base-750)',
    'var(--tourfly-colors-base-800)'
  );

  const label_color = useColorModeValue(
    'var(--tourfly-colors-base-300)',
    'var(--tourfly-colors-base-300)'
  );

  const control_color = useColorModeValue(
    'var(--tourfly-colors-base-800)',
    'var(--tourfly-colors-base-800)'
  );

  const label_hover_color = useColorModeValue(
    'var(--tourfly-colors-base-300)',
    'var(--tourfly-colors-base-300)'
  );
  return (
    <Tooltip label={tooltip} placement="top" hasArrow>
      <SegmentedControl
        size="xs"
        value={value}
        data={data}
        styles={() => ({
          root: {
            overflow: 'initial',
            backgroundColor: root_bg,
          },
          indicator: {
            backgroundColor: indicator_bg,
          },
          label: {
            '&[data-active]': {
              color: label_color,
            },
            '&:hover': {
              color: label_hover_color,
            },
          },

          controlActive: {
            backgroundColor: control_color,
            label: {
              fontWeight: 600,
              '&[data-active]': {
                color: label_color,
                '&:hover': {
                  color: label_hover_color,
                },
              },
            },
          },
        })}
        onChange={onChange}
      />
    </Tooltip>
  );
};

export default memo(IAISegmentedControl);
